"use client"
import {Container, Flex, Box, DropdownMenu, Avatar, Text} from "@radix-ui/themes";
import Link from "next/link";
import {usePathname} from "next/navigation";
import React from 'react';
import {AiFillBug} from "react-icons/ai";
import classNames from "classnames";
import {useSession} from "next-auth/react";
import Skeleton from "@/app/components/Skeleton"

const NavBar = () => {
    return (
        <nav className={" border-b px-5 mb-5 py-3"}>
            <Container>
                <Flex justify={"between"}>
                    <Flex align={"center"} gap={"3"}>
                        <Link href={"/"}>
                            <AiFillBug></AiFillBug>
                        </Link>
                        <NavLinks/>
                    </Flex>
                    <AuthStatus/>
                </Flex>
            </Container>
        </nav>
    );
};

const AuthStatus = () => {
    const {status, data: session} = useSession();
    if (status === "unauthenticated") {
        return (
            <Link className={"nav-link"} href={"/api/auth/signin"}>Login</Link>
        )
    }
    if (status === "loading") return <Skeleton width={"3rem"}/>;

    return (
        <Box>
            <DropdownMenu.Root>
                <DropdownMenu.Trigger>
                    <Avatar
                        className={"cursor-pointer"}
                        src={session!.user?.image!}
                        size={"2"}
                        radius={"full"}
                        fallback="?"
                        referrerPolicy={"no-referrer"}
                    />
                </DropdownMenu.Trigger>
                <DropdownMenu.Content>
                    <DropdownMenu.Label>
                        <Text size="2">{session!.user?.email}</Text>
                    </DropdownMenu.Label>
                    <DropdownMenu.Item>
                        <Link href={"/api/auth/signout"}>Logut</Link>
                    </DropdownMenu.Item>
                </DropdownMenu.Content>
            </DropdownMenu.Root>
        </Box>
    )

}

const NavLinks = () => {
    const links = [
        {href: "/", label: "Dashboard"},
        {href: "/issues", label: "Issues"}
    ]
    const currentPath = usePathname();
    return (
        <ul className={"flex space-x-6"}>
            {links.map((link) => {
                return <li key={link.href} className={classNames(
                    {
                        "text-zinc-500 hover:text-zinc-800 transition-colors": true,
                        "text-zinc-500": link.href !== currentPath,
                        "text-zinc-800": link.href === currentPath
                    }
                )}>
                    <Link href={link.href}>{link.label}</Link>
                </li>
            })}
        </ul>
    )
}

export default NavBar;